<template>
	<view class="pageItem">
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-gengduo-copy" @tap="backPage"></view>
			<view class="text">我的余额</view>
		</view>
		<view class="clear_box"></view>
		<view class="main">
			<view class="card">
				<view class="c_title">提现余额</view>
				<view class="input_box">
					<view class="code">￥</view>
					<input class="inp" type="digit" v-model="money" placeholder="输入提现金额" placeholder-style="font-size: 4vw;"/>
					<view class="btn" @click="allBalanceWithdraw">全部</view>
				</view>
				<view class="tip">
					可提现余额<label class="balance">{{all_balance}}</label>
				</view>
			</view>
			<view class="card">
				<view class="c_title">提现至</view>
				<view class="row" @click="payTypeChange('wx')">
					<view class="iconfont icon">&#xe650;</view>
					<view class="txt">微信</view>
					<view class="icon2 iconfont" :class="pay_type == 'wx'?'icon2_s':''">&#xe6ac;</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn">提现</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money:'',
				all_balance:'110.00',
				pay_type:''
			};
		},
		methods:{
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			payTypeChange(_type){
				this.pay_type = _type;
			},
			allBalanceWithdraw(){
				this.money = this.all_balance;
			}
		}
	}
</script>
<style>
page{
	background: #F6F8FA;
	padding-bottom: 21vw !important;
}
.pageItem{
	width: 100%;
	box-sizing: border-box;
}
.pageItem *{
	box-sizing: border-box;
}
</style>
<style lang="scss">
.main{
	width: 100%;
	padding: 4vw 4%;
}
.card:not(:first-child){
	margin-top: 30rpx;
}
.card{
	width: 100%;
	padding: 3.5vw;
	border-radius: 30rpx;
	background: #ffffff;
	.c_title{
		font-size: 4vw;
		font-weight: bold;
		color: #333333;
	}
	.input_box{
		width: 100%;
		display: flex;
		align-items: center;
		padding: 6vw 0 3vw;
		border-bottom: 1rpx solid #EEEEEE;
		.code{
			font-size: 6vw;
			font-weight: bold;
			color: #333333;
		}
		.inp{
			flex: 1;
			font-size: 7vw;
			color: #333333;
			padding: 0 25rpx;
		}
		.btn{
			font-size: 4vw;
			color: #0DA4AD;
		}
	}
	.tip{
		width: 100%;
		padding-top: 15rpx;
		color: #999999;
		font-size: 3vw;
		.balance{
			color: #DB5948;
			padding-left: 5rpx;
		}
	}
	.row{
		width: 100%;
		padding: 30rpx;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		.icon{
			font-size: 7vw;
			color: #28C445;
		}
		.txt{
			font-size: 4vw;
			font-weight: bold;
			color: #333333;
			flex: 1;
			padding: 0 30rpx;
		}
		.icon2{
			font-size: 5vw;
			color: #999999;
		}
		.icon2_s{
			color: #0DA4AD;
		}
	}
}
.footer{
	position: fixed;
	z-index: 98;
	width: 100%;
	height: 19vw;
	padding: 2vw 4% 5vw;
	bottom: 0;
	left: 0;
	background: #F6F8FA;
	.btn{
		height: 12vw;
		line-height: 12vw;
		border-radius: 7vw;
		text-align: center;
		width: 100%;
		background: #0DA4AD;
		font-size: 5vw;
		color: #ffffff;
		letter-spacing: 3rpx;
	}
}
</style>
